<!DOCTYPE html>
<html style="height:100%">
<head>
    <title>任务列表</title>
    <% include ../layouts/import.ejs %>
    <style>

        #calendar {
            max-width: 900px;
            height: 500px;
            margin: 0 auto;
        }

    </style>
</head>
<body style="height:100%">
<div class="index height">
    <% include ../layouts/header.ejs %>
    <div id="calendar "></div>
    <div class="container height personal-task">

        <div>
            <div style="margin-top:20px;" class="has-success">
                <input id="taskAddInput" class="task-add-input form-control" placeholder="请输入任务信息">
            </div>
            <div class="task-by-user"><h4>今日任务</h4>
                <div class="task-list-container" id="todayList">
                </div>
            </div>
            <div class="task-by-user"><h4>历史任务</h4>
                <div class="task-list-container" id="historyList">
                </div>
            </div>
        </div>
    </div>
    <% include ../layouts/footer.ejs %>
</div>
<script>

    $(document).ready(function() {
        $('#task-management').addClass('select-active')
        $('#calendar').fullCalendar({
            defaultDate: '2018-03-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2018-03-01'
                },
                {
                    title: 'Long Event',
                    start: '2018-03-07',
                    end: '2018-03-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2018-03-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2018-03-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2018-03-11',
                    end: '2018-03-13'
                },
                {
                    title: 'Meeting',
                    start: '2018-03-12T10:30:00',
                    end: '2018-03-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2018-03-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2018-03-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2018-03-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2018-03-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2018-03-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2018-03-28'
                }
            ]
        });

        initTodayList();
        initHistoryList();


        $('#taskAddInput').focus()
                .keyup(function (e) {
                    if (e.keyCode === 13) {  //回车'
                        var taskAddInput = $('#taskAddInput')
                        var taskName = taskAddInput.val();
                        taskAddInput.val('');
                        if (taskName) {
                            saveTask(taskName);
                        }
                    }
                });

        $(document).on('click', '.isComplete', function () {
            completeTask($(this))
        });

    });


    /**
     * ajax 获取今日任务
     */
    function initTodayList() {
        $.getJSON('/personalTask/todayList', function (result) {
            console.log(result)
            if (result && result.data) {
                var html = '';
                $.each(result.data, function (index, row) {
                    html +=
                            '<div class="task-container checkbox">' +
                            '<input type="checkbox"  data-task-id="' + row.id + '" class="isComplete" />' +
                            '<span class="task">' + row.task_name + '</span>' +
                            '<span class="create-time">' + row.create_time + '</span>' +
                            '</div>';
                });
                $('#todayList').html(html);
            }
        });
    }

    /**
     * ajax 获取历史任务
     */
    function initHistoryList() {
        $.getJSON('/personalTask/historyList', function (result) {
            if (result && result.data) {
                var html = '';
                $.each(result.data, function (index, row) {
                    html +=
                            '<div class="task-container checkbox">' +
                            '<input type="checkbox" data-task-id="' + row.id + '" class="isComplete" />' +
                            '<span class="task">' + row.task_name + '</span>' +
                            '<span class="create-time">' + row.create_time + '</span>' +
                            '</div>';
                });
                $('#historyList').html(html);
            }
        });
    }

    /**
     * 保存任务
     */
    function saveTask(taskName) {
        $.post('/personalTask/save', {taskName: taskName}, function (result) {
            if (result.errcode) {
            } else {
                var row = result.data;
                if (row && row.me_succeed) {    //if判断
                    var html =
                            '<div class="task-container checkbox">' +
                            '<input type="checkbox" data-task-id="' + row.insertId + '" class="isComplete"  />' +
                            '<span class="task">' + row.task_name + '</span>' +
                            '<span class="create-time">' + row.create_time + '</span>' +
                            '</div>';
                    $('#todayList').append(html);
                }
            }
        });
    }
    function completeTask(obj) {
        var isChecked = obj.attr("checked");
        if (!isChecked) {
            var taskId = obj.attr('data-task-id');
            console.log(taskId)
            $.post('/personalTask/complete/' + taskId, function (result) {
                obj.closest('.task-container').remove();
            });
        }
    }


</script>
</body>
</html>